
<template>
  <div>
    <div style="height:6vh;padding: 10px 20px;background-color: #fff">
      <span style="line-height: 60px;font-size: 20px">预约管理</span>
    </div>
    <!-- 搜索框区域 -->
    <el-card>
      <el-form :inline="true">
        <el-form-item label="预约人姓名" style="width:220px">
          <el-input placeholder="请输入" v-model="searchForm.username"></el-input>
        </el-form-item>
        <el-form-item label="预约人手机号" style="width:220px">
          <el-input placeholder="请输入" v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="预约人状态" style="width:290px">
          <el-select placeholder="请选择用户状态" v-model="searchForm.status">
            <el-option label="待上门" value="0"></el-option>
            <el-option label="已完成" value="1"></el-option>
            <el-option label="已取消" value="2"></el-option>
            <el-option label="已过期" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="times"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- tab栏切换组件 -->
      <div>
        <el-radio-group v-model="searchForm.type" @change="search">
          <!--size="large" -->
          <el-radio-button label="全部" value=""/>
          <el-radio-button label="参观预约" value="0"/>
          <el-radio-button label="探访预约" value="1"/>
        </el-radio-group>
      </div>
    </el-card>
    <!-- 基础表格组件 -->
    <el-card style="margin: 20px">
      <el-table :data="SearchDataList">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="预约类型" prop="type" align="center"
                         :formatter="TypeList"></el-table-column>
        <el-table-column label="预约人姓名" prop="name" align="center"></el-table-column>
        <el-table-column label="预约人手机号" prop="mobile" align="center"></el-table-column>
        <el-table-column label="探访人姓名" prop="visitor" align="center"></el-table-column>
        <el-table-column label="预约时间" prop="time" align="center"></el-table-column>
        <el-table-column label="创建人" prop="createByName" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="预约状态" prop="status" align="center"
                         :formatter="StatusList"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button link type="primary" @click="">到院</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 到院弹窗 -->
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {loadR} from "@/api/appointment/SubscribeApi.js";
const SearchDataList = ref([])
const times = ref([])
const searchForm = ref({
  username:'',
  mobile:'',
  status:'',
  type:'',
  startTime:'',
  endTime:''
})

const search=async () => {

  searchForm.value.startTime = times.value[0];
  searchForm.value.endTime = times.value[1];
  console.log(searchForm.value);
  const list = await loadR(searchForm.value);
  SearchDataList.value = list;
  console.log(list);
  console.log(SearchDataList.value);


  // let data = qs.stringify(searchForm.value);
  // getS(searchForm.value).then(r=>{
  //   console.log(r)
  //   SearchDataList.value = r;
  // })


  // axios.get(BASE_URL+'/reservation/page?'+data).then((r)=>{
  //   console.log(r)
  //   if (r.data.code === 200){
  //     SearchDataList.value = r.data.data;
  //   }
  // })
}
const resetSearch=()=>{
  searchForm.value = {
    username:'',
    mobile:'',
    status:'',
    type:''
  }
  times.value=[]
}
const StatusList = (row,column,cellValue,index)=>{
  if (cellValue === 0){
    return '待上门';
  }else if (cellValue === 1){
    return '已完成';
  }else if (cellValue === 2){
    return '已取消';
  }else if (cellValue === 3){
    return '已过期';
  }else{
    return '未知';
  }
}
const TypeList = (row,column,cellValue,index)=>{
  if (cellValue === 0){
    return '参观预约';
  }else if (cellValue === 1){
    return '探访预约';
  }else{
    return '未知';
  }
}
const loadCreateBy = ()=>{

}
onMounted(search);
</script>

<style scoped lang="less">

</style>